import {ComponentOptions} from "vue/types/options";
import ShowTooltip, {BindingValue} from "../../../directive/VshowTooltip/VshowTooltip";
import typeOfUtils from "../../../utils/type-of-utils";
import {DynamicForm} from "../index.vue.d";
import {DefaultForm, FormItemConfig} from "../ConfigType";
import RenderVNode from '../../../components/RenderVnodes/index.vue'
import {VNode} from "vue";

export const CommonMixin: ComponentOptions = {
  props: {
    formVM: {
      type: Object,
    },
    formItem: {
      type: Object,
    }
  },
  components: {
    RenderVNode
  },
  directives: {
    ShowTooltip
  },
  computed: {
    formVMHasType() {
      return this.formVM as DynamicForm
    },
    formItemHasType() {
      return this.formItem as FormItemConfig
    }
  },
  data() {
    return {
    }
  },
  created() {
    this.__initValue()
  },
  methods: {
    __getSlot(name: string, props?: any): VNode[] {
      const vm = this.formVMHasType
      const formItem = this.formItemHasType
      return vm.$scopedSlots[formItem.prop + '-' + name]?.({
          props,
          item: formItem,
          formData: vm.value
        }) // 模板语法
        || formItem.typeSlots?.(this.$createElement, formItem, vm.value)?.[name]?.(props) // 渲染函数语法
        || []
    },
    __showTitle(): BindingValue {
      const vm = this.formVMHasType
      const formItem = this.formItemHasType
      const getTitle = this.__comShowTitle
      if (typeOfUtils.isFunction(formItem.props?.getShowTitle)) { // 判断有没有显示显示标题，有直接调用，否则走组件默认的功能
        const showTitle = formItem.props.getShowTitle(vm.formData, formItem);
        if (typeOfUtils.isEmpty(showTitle)) { // 如果是空直接返回
          return {
            show: false,
            value: ''
          }
        }
        vm.$set(formItem.props, 'title', showTitle)
        return {
          show: true,
          value: showTitle
        }
      }
      if (typeOfUtils.isNotBoolean(formItem.props?.title)) { // 不是boolean直接返回
        if (typeOfUtils.isEmpty(formItem.props?.title)) { // 如果是空直接返回
          return {
            show: false,
            value: ''
          }
        }
        return {
          show: true,
          value: formItem.props.title,
        }
      }
      if (formItem.props?.title === false) { // 如果自己定义为false也不显示
        return {
          show: false,
          value: ''
        }
      }
      if (vm.formConfig.showTitle && DefaultForm.showTitle) { // 判断全局是否显示
        if (typeOfUtils.isFunction(getTitle)) {
          return {
            show: true,
            value: getTitle(vm, formItem), // 调用组件自己的显示标题方法
          }
        }
      }
      return {
        show: false,
        value: ''
      }
    },
    __initValue() {
      let value = this.formItem.setInitValue?.() || this.formItem.initValue || this.__comInitValue()
      this.$set(this.formVM.value, this.formItem.prop, value)
    },
    /**
     * 组件内部初始化值的方法，如果有自定义的就要重写这个方法
     */
    __comInitValue() {
      return ''
    },
    /**
     * 组件内部初始化值的方法，如果有自定义的就要重写这个方法
     */
    __comShowTitle() {
      return ''
    },
  }
}

/**
 <template>
 <el-input
 v-model="formVMHasType.value[formItemHasType.prop]"
 v-bind="formItemHasType.props"
 v-on="formItemHasType.events"
 v-show-tooltip.everyShow="__showTitle()"
 title=""
 ref="comRef"
 >
 </el-input>
 </template>

 <script>
 import {CommonMixin} from "../mixin/CommonMixin";

 export default {
  name: "Input",
  mixins: [CommonMixin],
  methods: {
    __comInitValue() {
      return ''
    },
    __comShowTitle() {
      return ''
    },
  },
  data(){
    return {
    }
  }
}
 </script>

 <style scoped lang="scss">

 </style>



 */
